function $(obj) {
	return document.getElementById(obj);
}
$('smallbox').onmouseover = function() {
	$('mask').style.display = 'block';
	$('bigBox').style.display = 'block';
}
$('smallbox').onmouseleave = function() {
	$('mask').style.display = 'none';
	$('bigBox').style.display = 'none';
}
$('smallbox').onmousemove = function() {
	var pageX = event.pageX;
	var pageY = event.pageY;
	var maskX = pageX - $('mask').offsetWidth / 2;
	var maskY = pageY - $('mask').offsetHeight / 2;
	if (maskX<0) {
		maskX=0;
	}
	if (maskY<0) {
		maskY=0;
	}
	if (maskX>$('box').offsetWidth-$('mask').offsetWidth) {
		maskX=$('box').offsetWidth-$('mask').offsetWidth;
	}
	if (maskY>$('box').offsetHeight-$('mask').offsetHeight) {
		maskY=$('box').offsetHeight-$('mask').offsetHeight;
	}
	$('mask').style.left = maskX + 'px';
	$('mask').style.top = maskY + 'px';
	var bigImgToMove=$('bigImg').offsetWidth-$('bigBox').offsetWidth;
	var maskToMove=$('smallbox').offsetWidth-$('mask').offsetWidth;
	var rate=bigImgToMove/maskToMove;
	$('bigImg').style.left=-rate*maskX+'px';
	$('bigImg').style.top=-rate*maskY+'px';
	
}